﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
</head>
<body>
 
					<div id="msgcontainer">	<h3>用户留言</h3>

						<div class="field"><input type="text" id="username" name="username"  class="w_def_text" title="您的姓名" value="您的姓名"/></div>
						<div class="field"><input type="text" id="email" name="email" class="w_def_text" title="您的邮箱" value="您的邮箱"/></div>
						<div class="textarea"><textarea cols="16" id="msg" name="msg" rows="5" class="w_def_text" title="请留言">请留言</textarea></div>
						<a href="javascript:void(0);" class="generic_button long"><span>发送</span></a>
						<div class="clear"></div>
					</div>
                    <script type="text/javascript">
                        $(function () {
                            $("#username").focus(function () {
                                if ($(this).val() == "您的姓名") {
                                    $(this).val("").css("color", "black");
                                }
                                else {
                                    $(this).css("color", "black");
                                }
                            });

                            $("#email").focus(function () {
                                if ($(this).val() == "您的邮箱") {
                                    $(this).val("").css("color", "black");
                                }
                                else {
                                    $(this).css("color", "black");
                                }
                            });
                            $("#msg").focus(function () {
                                if ($(this).html() == "请留言") {
                                    $(this).val("").css("color", "black");
                                }
                                else {
                                    $(this).css("color", "black");
                                }
                            });

                            $("#username").blur(function () {
                                checkUser();
                            })
                            var checkUser = function () {
                                if ($("#username").val().length == 0 || $("#username").val()=="您的姓名") {
                                    if (!$("#username").hasClass("error")) {
                                        $("<span/>").attr("id", "msguser").css("color", "red").css("font-size", "12px").html("*").insertAfter($("#username"));
                                        $("#username").addClass("error");
                                        return;
                                    }
                                } else {
                                    $("#username").next("#msguser").remove();
                                    $("#username").removeClass("error");
                                }
                            }
                            $("#email").blur(function () {
                                checkEmail();
                            })
                            var checkEmail = function () {
                                if ($("#email").val().length == 0 || $("#email").val()=="您的邮箱") {
                                    if (!$("#email").hasClass("error")) {
                                        $("<span/>").attr("id", "msgemail").css("color", "red").css("font-size", "12px").html("*").insertAfter($("#email"));
                                        $("#email").addClass("error");
                                        return;
                                    }
                                } else {
                                    $("#email").next("#msgemail").remove();
                                    $("#email").removeClass("error");
                                }
                            }
                            $("#msg").blur(function () {
                                checkMsg();
                            })
                            var checkMsg = function () {
                                if ($("#msg").html().length == 0 || $("#msg").html()=="请留言") {
                                    if (!$("#msg").hasClass("error")) {
                                        $("<span/>").attr("id", "msgerror").css("color", "red").css("font-size", "12px").html("*").insertAfter($("#msg"));
                                        $("#msg").addClass("error");
                                        return;
                                    }
                                } else {
                                    $("#msg").next("#msgerror").remove();
                                    $("#msg").removeClass("error");
                                }
                            }
                            $(".generic_button").click(function () {
                                checkUser();
                                checkEmail();
                                checkMsg();
                                if (!$("#username").hasClass("error") && !$("#email").hasClass("error")
                                  && $("#email").val().length > 0 && $("#username").val().length > 0 &&
                                  !$("#msg").hasClass("error") && $("#msg").val().length > 0) {
                                    $.ajax({
                                        type: "POST",
                                        url: "handler/MessageHandler.ashx?t=" + new Date(),
                                        data: { username: $("#username").val(), email: $("#email").val(), msg: $("#msg").val() },
                                        success: function (da) {
                                            if (da == "1") {
                                                $("#username").val("");
                                                $("#email").val("");
                                                $("#msg").val("");
                                                alert("留言成功！");
                                            }
                                            else {
                                                alert("留言失败！");
                                            }
                                        }
                                    });
                                }
                            });
                        })
                    </script>
</body>
</html>
